/* 版心的公共样式类 */
.container{
    width: 1240px;
    margin: 0 auto;
}

/* 快捷菜单模块:.xtx-shortcut */
.xtx-shortcut{
    /* width: 1920px; */
    height: 52px;
	background-color: #333333;
}

/* 设置快捷菜单栏中版心盒子的样式 */
.xtx-shortcut .container{
    height: 52px;
    /* ps */
    /* background: pink; */
}

/* 设置快捷导航条的li样式 */
.xtx-shortcut ul li{
    float: left;/* 横排显示 */
    line-height: 52px;/* 设置行高,垂直居中 */
    color: #666666;/* 设置a标签间隔线的颜色 */
}

/* 设置快捷导航条中a标签的样式 */
.xtx-shortcut ul a{
    margin: 0 16px;/* 左右外边距为16px */
    font-size: 14px;
	color: #dcdcdc;
}

/* 设置快捷导航条中最后一个a标签的样式 */
.xtx-shortcut li:last-child a{
    margin-right: 0;/* 最后一个a的右外边距为0 */
}

/* 生成手机a标签前面的小图标 */
.xtx-shortcut li:last-child a::before{
    content: "";
    display: inline-block;/* 行内块元素便于跟文本一样垂直对齐 */
    width: 11px;
	height: 16px;
    /* 相对于a标签的位置 */
    margin-top: -3px;
    margin-right: 8px;
    background: url(../images/sprites.png) -160px -70px;
    vertical-align: middle;/* 垂直对齐,否则默认基线对齐 */
}














/* ============主导航栏:.xtx-main-nav */
.xtx-main-nav{
    height: 130px;
    padding-top: 30px;/* 设置上内边距,下面元素都会往下移动 */
    box-sizing: border-box;/* 自动内减 */
    /* ps */
    /* background: pink; */
}

/* 设置logo */
.xtx-main-nav .logo{
    width: 207px;
	height: 70px;
    margin-left: 25px;
    /* background: red; */
}

/* 设置logo里面a标签样式 */
.xtx-main-nav .logo a{
    display: block;
    width: 207px;
	height: 70px;
    background: url(../images/logo.png);
    background-size: 100% 100%;
    font-size: 0;/* 让a标签中的文字不可见 */
}

/* 设置整体的导航条 */
.xtx-main-nav nav{
    margin-left: 40px;
}

/* 设置导航条里面的li */
.xtx-main-nav nav li{
    float: left;
    height: 70px;
    margin-right: 48px;/* 有间距 */
    line-height: 70px;/* 垂直居中 */
}

/* 设置导航条里面的a标签悬浮样式 */
.xtx-main-nav nav a:hover{
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;/* 下边框 */
    padding-bottom: 7px;/* 下边框间距 */
}

/* 设置搜索框样式 */
.xtx-main-nav .search{
    position: relative;
    width: 172px;
	height: 30px;
    margin-top: 24px;/* 计算出来的 */
    margin-left: 34px;/* 计算出来的 */
    background: purple;
}

/* 设置文本框前面的放大镜 */
.xtx-main-nav .search::before{
    position: absolute;/* 子绝父相:元素就会脱标,设置宽高就有效了 */
    top: 6px;
    left: 7px;
    content: '';
    width: 18px;
	height: 18px;
    background: url(../images/sprites.png) -80px -70px;
}


/* 设置里面的文本框样式 */
.xtx-main-nav .search input{
    width: 172px;
	height: 30px;
    border-bottom: 2px solid #e7e7e7;/* 下面的边线 */
    padding-left: 31px;/* 留出空间放置放大镜 */
}

/* 设置购物车 */
.xtx-main-nav .cart{
    position: relative;
    width: 23px;
	height: 23px;
    margin-top: 28px;
    margin-left: 15px;
    background: url(../images/sprites.png) -120px -70px;
}

/* 设置购物车中的文字 */
.xtx-main-nav .cart span{
    position: absolute;
    right: -12px;
    top: -5px;

    width: 20px;
	height: 15px;
    background-color: #e26237;
    border-radius: 8px;

    color: #ffffff;
    text-align: center;/* 水平居中 */
    line-height: 15px;/* 垂直居中 */
    font-size: 13px;
}











/* =========宣传服务 .xtx-service */
.xtx-service{
    height: 173px;
    background: #333;
}

/* 设置宣传服务的版心 */
.xtx-service .container{
    width: 1393px;/* 因为中间的边线比版心的公共类宽一些 */
    height: 173px;/* 注意:需要留出空间给边线 */
    border-bottom: 3px solid #434343;/* 版心下面的边线 */
    /* background: pink; */
    box-sizing: border-box;

}

/* 设置版心里面的a标签 */
.xtx-service .container a{
    float: left;

    width: 33.33%;
    height: 170px;
    background: skyblue;

    text-align: center;
    line-height: 170px;
    font-size: 28px;
	color: #fff;
}

/* 设置a标签文本前面的图片 */
.xtx-service .container a::before{
    content: '';
    display: inline-block;/* 转成行内块,好设置垂直对齐 */
    width: 58px;
	height: 58px;
    background: url('../images/sprites.png') 0 0;
    vertical-align: middle;/* 默认是基线对齐,需要让中间对齐 */
    margin-right: 19px;
}

.xtx-service a:nth-child(2)::before{
    background: url(../images/sprites.png) -130px 0;
}

.xtx-service a:nth-child(3)::before{
    background: url(../images/sprites.png) -65px 0;
}








/* =======版权信息:.xtx-copyright */
.xtx-copyright{
    height: 168px;
    background: #333;
}
/* 版权信息版心 */
.xtx-copyright .container{
    height: 168px;
    padding-top: 41px;/* 通过设置内边距防止塌陷 */
    box-sizing: border-box;
   /*  background: pink; */
    text-align: center;
    font-size: 14px;
	color: #999999;/* 因为颜色被bass.css中a的样式给覆盖了 */
}
/* 这么写会引起外边距的塌陷 */
/* .xtx-copyright .container p{
    margin-top: 41px;
} */
.xtx-copyright .container a{/* 重新设置 */
    color: #999999;
}

/* 设置第一个p标签的高度,下面的p就被挤出间隙 */
.xtx-copyright .container p:first-child{
    height: 34px;
}